import React from "react";
import {
  Form,
  Input,
  Button,
} from 'antd';
class ModifyCoupon extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      couponInfo:{
        tkt_name:"",
        tkt_type:"",
        tkt_usemoney:"",
        tkt_submoney:"",
        tkt_fstartdate:"",
        tkt_fenddate:"",
        tkt_ystartdate:"",
        tkt_yenddate:""
      }
    }
  }
  UNSAFE_componentWillMount() {
    this.setState({
      couponInfo: this.props.data
    })
  }

  const
  formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 5,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 16,
      },
    },
  };
  const
  tailFormItemLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 16,
        offset: 8,
      },
    },
  };
  render() {
    return (
        <Form
            {...this.formItemLayout}
            onFinish={this.props.handleOk}
            initialValues={
              {
                // eslint-disable-next-line
                ["tkt_name"]: this.state.couponInfo.tkt_name,
                // eslint-disable-next-line
                ["tkt_type"]: this.state.couponInfo.tkt_type,
                // eslint-disable-next-line
                ["tkt_usemoney"]: this.state.couponInfo.tkt_usemoney,
                // eslint-disable-next-line
                ["tkt_submoney"]: this.state.couponInfo.tkt_submoney,
                // eslint-disable-next-line
                ["tkt_fstartdate"]: this.state.couponInfo.tkt_fstartdate,
                // eslint-disable-next-line
                ["tkt_fenddate"]: this.state.couponInfo.tkt_fenddate,
                // eslint-disable-next-line
                ["tkt_ystartdate"]: this.state.couponInfo.tkt_ystartdate,
                // eslint-disable-next-line
                ["tkt_yenddate"]: this.state.couponInfo.tkt_yenddate,
              }
            }
        >
          <Form.Item
              name="tkt_name"
              label="优惠券名称"
              rules={[
                {
                  required: true,
                  message: '请输入优惠券名称',
                },
              ]}
              hasFeedback
          >
            <Input />
          </Form.Item>
          <Form.Item
              name="tkt_type"
              label="类型"
              rules={[
                {
                  required: false,
                },
              ]}
          >
            <Input disabled />
          </Form.Item>
          <Form.Item
              name="tkt_usemoney"
              label="订单金额"
              rules={[
                {
                  pattern: new RegExp(/^[1-9]\d*$/),
                  message: '订单金额必须为数字',
                },
                {
                  required: true,
                  message: '请输入订单金额',
                },
              ]}
              hasFeedback
          >
            <Input/>
          </Form.Item>
          <Form.Item
              name="tkt_submoney"
              label="优惠券金额"
              rules={[
                {
                  pattern: new RegExp(/^[1-9]\d*$/),
                  message: '优惠券金额必须为数字',
                },
                {
                  required: true,
                  message: '请输入优惠券金额',
                },
              ]}
              hasFeedback
          >
            <Input />
          </Form.Item>
          <Form.Item label="发放日期" style={{ marginBottom: 0 }}>
            <Form.Item
                name="tkt_fstartdate"
                // validateStatus="error"
                // help="Please select the correct date"
                style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
            >
              <Input disabled />
            </Form.Item>
            <span
                style={{ display: 'inline-block', width: '24px', lineHeight: '32px', textAlign: 'center' }}
            >
        -
      </span>
            <Form.Item
                name="tkt_fenddate"
                style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
              <Input disabled />
            </Form.Item>
          </Form.Item>

          <Form.Item label="有效日期" style={{ marginBottom: 0 }}>
            <Form.Item
                name="tkt_ystartdate"
                // validateStatus="error"
                // help="Please select the correct date"
                style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
            >
              <Input disabled />
            </Form.Item>
            <span
                style={{ display: 'inline-block', width: '24px', lineHeight: '32px', textAlign: 'center' }}
            >
        -
      </span>
            <Form.Item
                name="tkt_yenddate"
                style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
              <Input disabled />
            </Form.Item>
          </Form.Item>

          <Form.Item
              wrapperCol={{
                xs: { span: 24, offset: 0 },
                sm: { span: 16, offset: 5 },
              }}
          >
            <Button type="primary" htmlType="submit" style={{margin:'0 40px'}} >确认</Button>
            <Button type="primary" onClick={this.props.handleCancel} >取消</Button>
          </Form.Item>
        </Form>
    )
  }
}
export default ModifyCoupon